<div class="profile_room" [style.height]="profileHeight.toString()+'px'">
    <div class="profile_left">
        <div class="mb-lg">
            <ng-container *ngIf="user">
                <div class="avatarHolder">
                    <img src='assets/images/user/avatar_def.png'>
                </div>
                <h1 style="text-align:center"><span class="username">{{user.userId}}</span></h1>

                <div class="line"></div>

                <div class="detail">
                    <p *ngIf="user.email" class="user_info">
                        <i class="email"></i>
                        <a href="mailto:{{user.email}}" title="{{user.email}}" class="ws">{{user.email}}</a>
                    </p>
                </div>
            </ng-container>
        </div>
    </div>
    <div class="profile_right">
        <mat-tab-group> 
            <mat-tab label="Tool Record">
                <ng-template matTabContent>
                    <user-tool-record ></user-tool-record> 
                </ng-template>
            </mat-tab>
            <mat-tab label="Data">
                    <ng-template matTabContent>
                        <user-data-list ></user-data-list> 
                    </ng-template>
                </mat-tab>
        </mat-tab-group>
    </div>
</div>